

import { useState, useEffect, createContext  } from 'react';
import { Space, Table, Modal, Spin, Button  } from 'antd';
import { getArticleListData, deleteArticle } from '../../api/article'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { message } from 'antd';
const ArticleList = () => {
    const [params, setParams] = useState({pageNum: 1, pageSize: 10})
    const [loading, setLoading] = useState({loading: false})
    const [articleListData, setArticleListData] = useState(null)
    const ReachableContext = createContext(null);
    
    const { confirm } = Modal;
    const deleteRow = async (row) => {
        console.log(row)
        confirm({
            icon: <ExclamationCircleOutlined />,
            content: '确定要删除吗？',
            cancelText: '取消',
            okText: '确认',
            onOk: async() => {
              try {
                let res = await deleteArticle({id: row.id});
                if (res.code === 200) {
                    message.success('删除成功')
                    getArticleList()
                }
              } finally {

              }
            },
            onCancel() {
              console.log('Cancel');
            },
          });
    }
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
          },
        {
          title: '标题',
          dataIndex: 'title',
          key: 'title',
          render: (text) => <a>{text}</a>,
        },
        {
          title: '内容',
          dataIndex: 'content',
          key: 'content',
        },
        {
          title: '背景图片',
          dataIndex: 'coverImg',
          key: 'coverImg',
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
        },
        {
          title: 'status',
          key: 'status',
          dataIndex: 'status',
          render: (_,  data) => (
            <Space>
                {data.status}
            </Space> 
          ),
        },
        {
          title: 'Action',
          key: 'action',
          render: (_, record) => (
            <Space size="middle">
              <a>编辑</a>
              <a onClick={() => deleteRow(record)}>删除</a>
            </Space>
          ),
        },
      ];
    useEffect(() => {
        getArticleList()
        return () => {
            console.log('do that')
        }
    }, [])
    const getArticleList = async () => {
        setLoading(true)
        try {
            let res = await getArticleListData(params);
            if (res.code === 200) {
                setArticleListData(res.data.list)
            }
            setLoading(false)
        } finally {
            setLoading(false)
        }
    }

  return (
    <Spin className="ArticleList" spinning={loading}>
        <Table columns={columns} dataSource={articleListData} rowKey="id" />
    </Spin>
  );
}

export default ArticleList;
